<template>
  <view class="contents">
    <u-navbar
      title="用户评价"
      leftIconColor="#f8f8f8"
      :placeholder="true"
      bgColor="#fff"
    >
      <template #left>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            class="logo"
            src="/static/zuo1.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
      <template #right>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            class="logo"
            src="/static/start1.jpg"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
          <image
            class="logo"
            src="/static/fx.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
    </u-navbar>
    <view class="title">
      <text>团购</text>
    </view>
    <!-- 评价 -->
    <view id="evaluate" @click="buyshow = false">
      <view class="evaluatemsg">
        <view class="evaluatemsg_content" @click="detail">
          <view
            class="evaluatemsg_content_item"
            v-for="(item, i) in evaluatelist"
            :key="i"
          >
            <view class="infomsg">
              <image class="img" :src="item.url" mode=""></image>
              <view class="name">{{ item.name }}</view>
              <view class="time">{{ item.time }}</view>
            </view>
            <view class="content">{{ item.content }}</view>
            <view class="imglist">
              <image
                class="img"
                :src="itemimg"
                mode=""
                v-for="(itemimg, i) in item.img"
                :key="i"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="gobuy">
      <view class="img1">
        <image
          class="img"
          src="../../static/tabBar/zhuye2.png"
          mode=""
          @click="gomineindex"
        ></image>
        <image
          class="img"
          src="../../static/tabBar/shoucang.png"
          mode=""
        ></image>
        <image
          class="img2"
          src="../../static/tabBar/xiaoxi1.png"
          mode=""
        ></image>
      </view>
      <view class="gocart">加入购物车</view>
      <view class="goshopping" @click="gobuy">立即购买</view>
    </view>
    <view class="show" v-if="buyshow">
      <view class="price">￥299</view>
      <view class="msg">
        <view class="msg_1">共享形式</view>
        <view class="msg_2">
          <view class="msg_3">全托</view>
          <view class="msg_3">半托</view>
          <view class="msg_3">仅租赁</view>
        </view>
        <view class="msg_4">费用说明</view>
        <view class="msg_5">
          1、费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明
          2、费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明
          3、费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明费用说明
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count1: 5,
      value1: 5,
      buyshow: false,
      evaluatelist: [
        {
          id: 1,
          name: "李先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
        {
          id: 2,
          name: "王先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
        {
          id: 3,
          name: "王先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
      ],
    };
  },
  methods: {
    detail() {
      uni.navigateTo({
        url: "/packageB/productdetails/evaluationdetails",
      });
    },
    gobuy() {
      this.buyshow = true;
    },
    gomineindex() {
      uni.switchTab({
        url: "/pages/mine/index",
      });
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

page {
  padding: 0rpx 20rpx;
  background-color: #f9f9f9;
}

.contents {
  font-family: "Poppins";
}

.title {
  font-size: 32rpx;
  font-weight: 600;
  padding: 10rpx;
}

// 评价
#evaluate {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;

    .title1 {
      font-size: 32rpx;
      font-weight: 600;
    }

    .title2 {
      font-size: 30rpx;
      color: #676767;
    }
  }
}

.evaluatemsg {
  width: 100%;
  background-color: #fff;
  border-radius: 30rpx;
  padding-bottom: 20rpx;

  .evaluatemsg_content_item {
    padding: 10rpx 30rpx;

    .infomsg {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .name {
        font-size: 28rpx;
        flex: 1;
      }

      .time {
        font-size: 28rpx;
        color: #676767;
      }
    }

    .content {
      font-size: 28rpx;
      color: #676767;
      margin-bottom: 20rpx;
    }

    .imglist {
      display: flex;

      .img {
        width: 140rpx;
        height: 140rpx;
        margin-left: 10rpx;
        border-radius: 10rpx;
      }
    }
  }
}

.gobuy {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 100rpx;

  .img {
    width: 50rpx;
    height: 50rpx;
    margin-right: 28rpx;
  }

  .img2 {
    width: 50rpx;
    height: 50rpx;
    margin-right: 15rpx;
  }

  .img1 {
    flex: 1;
    padding-left: 20rpx;
  }

  .gocart {
    width: 200rpx;
    background: #9a9390;
    border-radius: 40rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    padding: 10rpx 20rpx;
    color: #fff;
    margin-right: 10rpx;
  }

  .goshopping {
    width: 200rpx;
    border-radius: 40rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    padding: 10rpx 20rpx;
    color: #fff;
    margin-right: 10rpx;
    background: #eea427;
  }
}

.show {
  width: 100%;
  background-color: #d66e44;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  position: fixed;
  left: 0;
  bottom: 100rpx;
  z-index: 555;

  .price {
    color: #fff;
    padding: 20rpx 20rpx;
    font-size: 36rpx;
  }

  .msg {
    background-color: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 20rpx;
  }

  .msg_1 {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
  }

  .msg_2 {
    display: flex;
    margin-bottom: 15rpx;

    .msg_3 {
      border: 1px solid #bbbbbb;
      margin-right: 20rpx;
      padding: 5rpx 20rpx;
      border-radius: 15rpx;
      background-color: #eaebec;
      color: #000;
    }
  }

  .msg_4 {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
  }

  .msg_5 {
    width: 100%;
    font-size: 30rpx;
    padding: 0rpx 20rpx;
  }
}
</style>